<template>
	<div class='search-list container'>
		<Header></Header>
		<section>
			<div class='search-filter'>
				<div 
					class='filter-item'
					v-for="(item,index) in searchList.data"
					:key='index'
					@click='changeTab(index)'
				>
					<div :class="  searchList.currentIndex==index ? 'active' : ''  ">{{item.name}}</div>
					<div v-if=' index!=0 '>
						
						<i 
							class='iconfont icon-arrow_up_fat'
							:class=' item.status ==1 ? "active":""  '
						></i>
						
						<i class='iconfont icon-arrow_down_fat'
							:class=' item.status ==2 ? "active":""  '
						></i>
						
					</div>
				</div>
			</div>
			<ul v-if='goodsList.length'>
				<li 
					v-for='(item,index) in goodsList'
					:key='index'
				>
					<h2><img :src="item.goods_imgUrl" alt=""></h2>
					<div class='goods-name'>{{item.goods_name}}</div>
					<div class='goods-content'>
						<div>
							<span>¥</span>
							<b>{{item.goods_price}}</b>
						</div>
						<div class='goods-price'>立即购买</div>
					</div>
				</li>
			</ul>
			<div v-else>
				暂无数据...
			</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import Header from '@/components/search/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request.js'
export default{
	data () {
		return {
			goodsList:[],
			searchList:{
				currentIndex:0,
				data:[
					/*
					status:0  都不亮
					status:1  上箭头亮
					status:2  下箭头亮
					*/
					{name:'综合',key:'zh'},
					{name:'价格',status:0,key:'goods_price'},
					{name:'销量',status:0,key:'goods_num'},
				]
			}
		}
	},
	computed:{
		orderBy(){
			//要知道是点击的哪一个
			let obj = this.searchList.data[this.searchList.currentIndex];
			//根据status状态1，2来判断，到底是升序还是降序
			let val = obj.status == '1' ? 'asc' : 'desc';
			return {
				[obj.key] : val
			}
		}
	},
	components:{
		Header,
		Tabbar
	},
	created(){
		this.getData();
	},
	methods:{
		//请求商品数据
		getData(){
			
			http.$axios({
				url:'/api/goodsList',
				params:{
					key:this.$route.query.key,
					...this.orderBy
				}
			}).then(res=>{
				this.goodsList = res.result;
			})
			
		},
		changeTab( index ){
			
			this.searchList.currentIndex = index;
			
			let item = this.searchList.data[index]
			
			//全部清0
			this.searchList.data.forEach((v,i)=>{
				if( i != index){
					v.status = 0;
				}
			})
			
			//更改状态
			//if( index == this.searchList.currentIndex ){
				item.status = item.status == 1 ? 2 : 1;
			//}
			
			//发送请求
			this.getData();
		}
	},
	watch:{
		$route(){
			this.getData();
		}
	}
}
</script>

<style scoped lang='scss'>
.search-filter{
	display: flex;
	justify-content: center;
	.filter-item{
		display: flex;
		padding:0.4rem;
		div{
			display: flex;
			flex-direction: column;
		}
	}
}
section{
	ul{
		display: flex;
		flex-wrap: wrap;
		li{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 50%;
			padding:0.266666rem;
			img{
				width: 4.586666rem;
				height: 4.586666rem;
			}
			.goods-name{
				width: 100%;
				font-size:0.373333rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.goods-content{
				display: flex;
				justify-content: space-between;
				padding:0.266666rem 0;
				width: 100%;
				font-size:0.373333rem;
				span{
					font-size: 0.32rem;
					color:red;
				}
				b{
					font-size:0.426666rem;
					color:red;
				}
				.goods-price{
					padding:0.08rem 0.16rem;
					color:#fff;
					background-color: red;
				}
			}
		}
	}
}
.active{
	color:red;
}

</style>
